<template>
  <div class="common-layout">
    <el-container>
      <el-header><el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
          @select="handleSelect">
          <el-menu-item index="0">
            <img src="C:\Users\86159\IdeaProjects\Booksys\booksys-backend\src\components\img.png"
                 style="width: 90px; height: 60px;"  alt="八爪鱼后台管理系统" />
            <h2>欢迎来到八爪鱼后台系统！</h2>
          </el-menu-item>
          <div class="flex-grow" />
          <el-menu-item index="1">欢迎，Admire</el-menu-item>
          <el-sub-menu index="2">
            <template #title>进入页面</template>
            <el-menu-item index="2-1">item one</el-menu-item>
            <el-menu-item index="2-2">item two</el-menu-item>
            <el-menu-item index="2-3">item three</el-menu-item>
            <el-sub-menu index="2-4">
              <template #title>item four</template>
              <el-menu-item index="2-4-1">item one</el-menu-item>
              <el-menu-item index="2-4-2">item two</el-menu-item>
              <el-menu-item index="2-4-3">item three</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
        </el-menu></el-header>
      <el-container>
        <el-aside width="200px">
              <el-menu default-active="2" 
              class="el-menu-vertical-demo" router>
                <el-menu-item v-for="item in menuList" :index="item.path">
                  <el-icon><icon-menu /></el-icon>
                  <span>{{item.meta.title}}</span>
                </el-menu-item>
              </el-menu>
</el-aside>
        <el-main>
          <router-view>  </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  import {useRouter} from "vue-router"
  export default{
    data(){
      return{
        router:useRouter(),
        activeIndex:1,
        menuList:[]
      }
    },
    methods:{
      handleSelect(key,keyPath){
        
      }
    },
    mounted(){
      const myrouter=this.router.getRoutes();
      this.menuList=myrouter.filter(item=>item.meta.power==20)
      console.log(myrouter);
      console.log(this.menuList);
    }
  }
  </script>

<style>
  .flex-grow {
    flex-grow: 1;
  }
</style>